<template>
  <div class="pc-forget">
    <div class="pc-forget-box">
      <box-header></box-header>
      <div class="pc-forget-type">
        <span class="pc-forget-find">
          <a href="javascript:;" class="find" :class="{'find-active': find}" @click="chooseFind">找回密码</a>
        </span>
        <span class="pc-forget-appeal">
          <a href="javascript:;" class="appeal" :class="{'appeal-active': !find}" @click="chooseAppeal">账号申诉</a>
        </span>
      </div>
      <div class="pc-forget-content">
        <p class="pc-forget-text" v-if="reset">账号验证 -> 重置密码 -> 完成</p>
        <p class="pc-forget-text" v-if="!reset">账号验证 -> 申诉验证 -> 完成</p>
        <div v-if="reset">
          <div v-if="resetOne">
            <form>
              <div class="phoneNumber-wrapper">
                <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
                <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
              </div>
              <div class="captcha-wrapper">
                <mt-field placeholder="请输入验证码" v-model="captcha"></mt-field>
                <span class="captcha-btn" @click="countDown"
                      :class="{'captcha-active':start || !phoneNumber || state.phone !== 'success'}">
              <count-down :start=start></count-down>
            </span>
              </div>
            </form>
            <a href="javascript:;" class="btn-submit-pc" @click="resetNext" :class="{'btn-readonly-pc': state.phone !== 'success'
            || !captcha || !phoneNumber}">下一步</a>
          </div>
          <div v-else>
            <form>
              <div class=" password-wrapper">
                <mt-field :state="state.password" placeholder="请输入新密码" type="password" v-model="password"></mt-field>
                <p class="tips" v-show="state.password === 'error'">请输入长度为6-20位数的密码</p>
              </div>
              <mt-field placeholder="确认密码" type="password" v-model="confirmPassword"></mt-field>
            </form>
            <a href="javascript:;" class="btn-submit-pc" @click="resetOk"
               :class="{'btn-readonly-pc': state.password !== 'success'|| !password || !confirmPassword}">完成</a>
          </div>
        </div>
        <div v-else>
          <div class="pc-forget-appeal" v-if="appealOne">
            <div class="phoneNumber-wrapper">
              <mt-field :state="state.appeal" placeholder="请输入您的手机号" type="phone" v-model="appealPhone"></mt-field>
              <p class="tips" v-show="state.appeal === 'error'">请确认您的手机号码格式</p>
            </div>
            <a href="javascript:;" class="btn-submit-pc" @click="appealNext" :class="{'btn-readonly-pc': state.appeal !== 'success'
            || !appealPhone}">下一步</a>
          </div>
          <div v-else>
            <div class="resentGames-wrapper">
              <mt-field placeholder="最近玩的游戏名称（游戏1，游戏2...）" v-model="resentGames"></mt-field>
              <p class="tips">验证用户最近使用历史记录</p>
            </div>
            <div class="registerTime-wrapper">
              <mt-field :state="state.time" placeholder="请输入您的注册时间 XXXX - XX - XX" v-model="registerTime"></mt-field>
              <p class="tips">验证用户注册时间，误差在一个月</p>
            </div>
            <a href="javascript:;" class="btn-submit-pc" @click="appealOk" :class="{'btn-readonly-pc': state.time !== 'success'
            || !resentGames || !registerTime}">完成</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BoxHeader from '../../components/common/pc-box-header/box-header'
  import countDown from '../../components/common/countDown/countDown'

  export default {
    data() {
      return {
        find: true,
        reset: true,
        resetOne: true,
        appealOne: true,
        start: false,
        appealPhone: '',
        registerTime: '',
        resentGames: '',
        password: '',
        captcha: '',
        confirmPassword: '',
        phoneNumber: '',
        state: {phone: '', password: '', appeal: '', time: ''}
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      },
      appealPhone(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.appeal = 'error'
        } else {
          this.state.appeal = 'success'
        }
      },
      password(value) {
        if (value.length < 6 || value.length > 20) {
          this.state.password = 'error'
        } else {
          this.state.password = 'success'
        }
      },
      registerTime(value) {
        let reg = /^(\d{4})-(\d{2})-(\d{2})$/
        if (!reg.test(value)) {
          this.state.time = 'error'
        } else {
          this.state.time = 'success'
        }
      }
    },
    methods: {
      chooseFind() {
        this.find = true
        this.reset = true
        this.phoneNumber = ''
      },
      chooseAppeal() {
        this.find = false
        this.reset = false
        this.phoneNumber = ''
      },
      resetNext() {
        if (this.state.phone === 'success' && this.captcha && this.phoneNumber) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=backPassword', {
            params: {
              phone: this.phoneNumber,
              code: this.captcha
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.resetOne = false
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000
              })
            }
          })
        }
      },
      appealNext() {
        if (this.state.appeal === 'success' && this.appealPhone) {
          this.appealOne = false
        }
      },
      resetOk() {
        if (this.state.password === 'success' && this.password && this.confirmPassword) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=modifyPassword', {
            params: {
              phone: this.phoneNumber,
              password: this.password,
              re_password: this.confirmPassword
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '密码修改成功，即将为您跳转至登录页面...',
                duration: 2000
              })
              setTimeout(() => {
                this.eventBus.$emit('pcLogin', true)
              }, 2000)
            }
          })
        }
      },
      appealOk() {
        if (this.state.time === 'success' && this.resentGames && this.registerTime) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=stateValidation', {
            params: {
              game_history: this.resentGames,
              add_time: this.registerTime,
              phone: this.appealPhone
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '账号申诉成功，审核成功后将会以短信的形式通知您',
                duration: 2000
              })
              setTimeout(() => {
                this.eventBus.$emit('closeBox', true)
              }, 2000)
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000
              })
            }
          })
        }
      },
      countDown() {
        this.start = true
        if (this.phoneNumber || this.state.phone === 'success') {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=sendSms', {
            params: {
              phone: this.phoneNumber,
              type: 1
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '发送成功',
                duration: 1000
              })
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000
              })
            }
          })
        }
      }
    },
    mounted() {
      this.eventBus.$on('countDown', (stat) => {
        this.start = stat
      })
    },
    components: {
      BoxHeader,
      countDown
    }
  }
</script>

<style type="text/css">
  .pc-forget {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    z-index: 100;
  }

  .pc-forget .pc-forget-box {
    width: 643px;
    min-height: 533px;
    background: #fff;
    border-radius: 10px;
  }

  .pc-forget .pc-forget-box .pc-forget-text {
    font-size: 24px;
    color: #999;
    white-space: nowrap;
  }

  .pc-forget .pc-forget-box .pc-forget-content {
    padding: 52px 158px 0 158px;
  }

  .pc-forget .pc-forget-box .pc-forget-content .phoneNumber-wrapper, .pc-forget .pc-forget-box .pc-forget-content .password-wrapper,
  .pc-forget .pc-forget-box .pc-forget-content .resentGames-wrapper, .pc-forget .pc-forget-box .pc-forget-content .registerTime-wrapper {
    position: relative;
  }

  .pc-forget .pc-forget-box .pc-forget-content .pc-forget-appeal {
    padding-top: 32px;
  }

  .pc-forget .pc-forget-box .pc-forget-content .captcha-wrapper {
    position: relative;
  }

  .pc-forget .pc-forget-box .pc-forget-content .captcha-wrapper .captcha-btn {
    position: absolute;
    display: block;
    padding: 0 5px;
    min-width: 123px;
    height: 40px;
    top: 4px;
    right: 4px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    background: #2ECC40;
    z-index: 99;
    border-radius: 5px;
  }

  .pc-forget .pc-forget-box .pc-forget-content .captcha-wrapper .captcha-active {
    background: #ccc;
  }

  .pc-forget .pc-forget-box .pc-forget-type {
    display: inline-flex;
    margin-top: 54px;
    width: 100%;
    justify-content: center;
  }

  .pc-forget .pc-forget-box .pc-forget-type .pc-forget-find .find, .pc-forget .pc-forget-box .pc-forget-type .pc-forget-appeal .appeal {
    font-size: 32px;
    padding-bottom: 15px;
    border-bottom: 3px solid #FFF;
  }

  .pc-forget .pc-forget-box .pc-forget-type .pc-forget-find .find {
    margin-right: 140px;
  }

  .pc-forget .pc-forget-box .pc-forget-type .pc-forget-find .find-active, .pc-forget .pc-forget-box .pc-forget-type .pc-forget-appeal .appeal-active {
    border-bottom: 3px solid #2ECC40;
    color: #2ECC40;
  }
</style>
